<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="params">
      <el-form-item label="直播间标题">
        <el-input v-model="params.name" placeholder="直播间标题" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="resetPamars">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addLive">新增</el-button>
        <el-button :loading="syncLoading" type="success" @click="handleSync">同步</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" v-loading="tableLoading" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="room_id" label="直播间id"/>
      <el-table-column prop="name" width="150" label="直播间标题"/>
      <el-table-column prop="cover_imge" label="背景图">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.cover_imge" target="_blank" title="查看最大化图片">
              <img :src="scope.row.cover_imge" style="width: 300px;height: 300px"/>
            </a>
            <img slot="reference" :src="scope.row.cover_imge" @click="$openImg(scope.row.cover_imge)"
                 style="width: 50px;height: 50px; cursor:pointer"/>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="share_imge" label="分享图片">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.share_imge" target="_blank" title="查看最大化图片"><img :src="scope.row.share_imge"
                                                                                 style="width: 300px;height: 300px"/></a>
            <img slot="reference" :src="scope.row.share_imge" @click="$openImg(scope.row.share_imge)"
                 style="width: 50px;height: 50px; cursor:pointer"/>
          </el-popover>
        </template>
      </el-table-column>
      <!-- 101：直播中，102：未开始，103 已结束，104 禁播，105：暂停，106：异常，107：已过期-->
      <el-table-column prop="live_status" width="100" label="直播间状态">
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-if="scope.row.live_status === 101" >直播中</el-tag>
            <el-tag v-if="scope.row.live_status === 102" >未开始</el-tag>
            <el-tag type="info" v-if="scope.row.live_status === 103" >已结束</el-tag>
            <el-tag type="danger" v-if="scope.row.live_status === 104" >禁播</el-tag>
            <el-tag type="info" v-if="scope.row.live_status === 105" >暂停</el-tag>
            <el-tag type="danger" v-if="scope.row.live_status === 106" >异常</el-tag>
            <el-tag type="info" v-if="scope.row.live_status === 107" >已过期</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="startTime" label="开始时间" width="200">
        <template slot-scope="scope" width="200">
          <span>{{ scope.row.start_time }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="endTime" label="预计结束时间" width="200">
        <template slot-scope="scope" width="200">
          <span>{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="anchor_name" label="主播昵称"/>
      <el-table-column prop="anchor_wechat" width="150" label="主播微信号"/>
      <el-table-column prop="anchor_imge" label="主播头像">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <a :href="scope.row.anchor_imge" target="_blank" title="查看最大化图片">
              <img :src="scope.row.anchor_imge" style="width: 300px;height: 300px"/></a>
            <img slot="reference" :src="scope.row.anchor_imge" @click="$openImg(scope.row.anchor_imge)"
                 style="width: 50px;height: 50px; cursor:pointer"/>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="type" width="100" label="直播类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" >推流</el-tag>
          <el-tag v-else >手机直播</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="closeReplay" label="回放">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.close_replay === 1" >关闭</el-tag>
          <el-tag v-else :type=" '' ">开启</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateLive(scope.row)">修改</el-button>
          <el-button type="text" class="c-warning" size="small" @click="showGoodsDialog(scope.row)">直播间商品</el-button>
          <el-button type="text" class="c-error" size="small" @click="deleteHandle(scope.row.room_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="params.page"
                   :page-sizes="[10, 20, 50, 100]" :page-size="params.limit" :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <live-add ref="dialogAdd" @updataList="getList"></live-add>
    <live-update ref="dialogUpdate" @updataList="getList"></live-update>
    <live-goods ref="dialogGoods" @updataList="getList"></live-goods>
  </div>
</template>

<script>
  import seviceApi from '@/api/wechatLive.js'
  import liveAdd from './live_add'
  import liveUpdate from './live_update'
  import liveGoods from './live_goods'

  export default {
    data () {
      return {
        params: {
          page: 1,
          limit: 10
        },
        totalPage: 0,
        dataList: [],
        tableLoading: false,
        dataListLoading: false,
        addVisible: false,
        updateVisible: false,
        goodsVisible: false,
        syncLoading: false,
        idList: []
      }
    },
    components: {
      liveAdd,
      liveUpdate,
      liveGoods
    },
    mounted () {
      this.getList()
      this.handleSync()
    },
    methods: {
      resetPamars () {
        this.params.name = ''
        this.getList()
      },
      getList () {
        this.tableLoading = true
        seviceApi.getWechatLiveList(this.params).then(res => {
          if (res && res.data.code === 200) {
            this.dataList = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
          this.tableLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.params.limit = val
        this.getList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.params.page = val
        this.getList()
      },
      addLive () {
        this.$nextTick(() => {
          this.$refs.dialogAdd.open()
        })
      },
      updateLive (row) {
        console.log('row', row)
        this.$nextTick(() => {
          this.$refs.dialogUpdate.init(row.room_id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定要删除该条数据?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          seviceApi.wechatLiveDelete(id).then(res => {
            if (res && res.data.code === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            }
          })
        }).catch(() => {
        })
      },
      getGoods (p) {
        var ids = []
        p.forEach((item, index) => {
          ids.push(item.id)
        })
        this.form.productId = ids.join(',')
      },
      showGoodsDialog (row) {
        console.log('row', row)
        this.goodsVisible = true
        this.$nextTick(() => {
          this.$refs.dialogGoods.init(row.room_id)
        })
      },
      handleSelectGoods () {

      },
      handleSync () {
        this.syncLoading = true
        seviceApi.wechatLiveSync().then(() => {
          this.getList()
          this.syncLoading = false
        }).then(() => {
          this.syncLoading = false
        })
      }
    }
  }
</script>

<style scoped>
  .c-info {
    color: #999999 !important;
  }

  .table-img {
    width: 60px;
    height: 60px;
  }
</style>
